import { Callout } from '@/components'

# `with` API로 변환

<Callout type='info'>

`@suspensive/react` v2 환경에서 `@suspensive/react` v3로 업데이트하는 경우 추천합니다.

</Callout>

`@suspensive/react` v3에서는 `wrap` API를 제거하고, `wrap`을 대체할 수 있는 `with` API를 제공합니다. 이는 각 컴포넌트 `<ErrorBoundaryGroup/>`, `<ErrorBoundary/>`, `<Suspense/>`에 추가되었습니다.

해당 Codemod가 도움이 될 수 있는 v3 브레이킹 체인지에 대해 자세한 내용은 [v3로 마이그레이션하기](/docs/react/migration/migrate-to-v3)에서 확인할 수 있습니다.

```bash filename="Terminal"
npx @suspensive/codemods migrate-with-api .
```

`wrap` builder 패턴을 각 컴포넌트의 `with` API로 변환할 수 있습니다.

예:

```tsx /wrap/
import { wrap } from '@suspensive/react'

const Example = wrap
  .ErrorBoundaryGroup({ blockOutside: false })
  .ErrorBoundary({
    fallback: ({ error }) => <>{error.message}</>,
    onError: logger.log,
  })
  .Suspense({ fallback: <>loading...</>, clientOnly: true })
  .on(() => {
    return <>Example</>
  })
```

변환 후:

```tsx /with/
import { ErrorBoundaryGroup, ErrorBoundary, Suspense } from '@suspensive/react'
import { useSuspenseQuery } from '@suspensive/react-query'

const Example = ErrorBoundaryGroup.with(
  { blockOutside: false },
  ErrorBoundary.with(
    {
      fallback: ({ error }) => <>{error.message}</>,
      onError: logger.log,
    },
    Suspense.with({ fallback: <>loading...</>, clientOnly: true }, () => {
      return <>Example</>
    })
  )
)
```
